﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
    <style>
        .table-hover tbody tr:hover {
            background-color: rgba(0, 0, 0, 0.03);
        }

        .op-btn-group {
            min-width: 180px;
        }

        .spinner-container {
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="container py-4">
        <!-- 文件上传模块 -->
        <div class="card mb-4 shadow-sm">
            <div class="card-body">
                <h5 class="card-title mb-3">📤 图片上传</h5>
                <div class="input-group">
                    <input type="file" class="form-control" id="uploadFile">
                    <button class="btn btn-primary" type="button" onclick="upload()">上传</button>
                </div>
                <div id="uploadResult" class="mt-2"></div>
            </div>
        </div>

        <!-- 水印提取模块 -->
        <div class="card mb-4 shadow-sm">
            <div class="card-body">
                <h5 class="card-title mb-3">🔍 水印提取</h5>
                <div class="input-group">
                    <input type="file" class="form-control" id="extractFile">
                    <button class="btn btn-info" type="button" onclick="extract()">提取水印</button>
                </div>
                <div id="extractResult" class="mt-2"></div>
            </div>
        </div>

        <!-- 图片列表模块 -->
        <div class="card shadow-sm">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="card-title m-0">📁 图片列表</h5>
                    <div class="d-flex gap-2">
                        <select class="form-select" id="pageSize" style="width: 120px;" onchange="loadImages()">
                            <option value="10">10 条/页</option>
                            <option value="20" selected>20 条/页</option>
                            <option value="50">50 条/页</option>
                        </select>
                        <div class="input-group" style="width: 150px;">
                            <input type="number" id="pageNumber" class="form-control" value="1" min="1">
                            <button class="btn btn-outline-secondary" onclick="loadImages()">跳转</button>
                        </div>
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table table-hover align-middle">
                        <thead class="table-light">
                            <tr>
                                <th width="40%">文件名</th>
                                <th width="30%">创建时间</th>
                                <th width="30%">操作</th>
                            </tr>
                        </thead>
                        <tbody id="imageList">
                            <tr>
                                <td colspan="3" class="text-center spinner-container">
                                    <div class="spinner-border text-primary" role="status">
                                        <span class="visually-hidden">Loading...</span>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 水印弹窗 -->
        <div class="modal fade" id="watermarkModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">✏️ 添加文字水印</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">水印文字</label>
                            <input type="text" id="watermarkInput" class="form-control"
                                   placeholder="请输入水印文字" value="asus">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="confirmWatermark">确认添加</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 全局变量
        let currentPage = 1;
        let currentFileName = '';

        // 文件上传功能
        function upload() {
            const file = $('#uploadFile')[0].files[0];
            if (!file) return showAlert('请选择要上传的文件', 'warning');

            const formData = new FormData();
            formData.append('file', file);

            $.ajax({
                url: '/api/Watermark/upload',
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                success: res => {
                    showAlert(`上传成功！<br>文件名：${res.fileName}`, 'success', 3000);
                    $('#uploadFile').val('');
                    loadImages();
                },
                error: xhr => {
                    showAlert(`上传失败：${xhr.responseText}`, 'danger');
                }
            });
        }

        // 加载图片列表
        function loadImages() {
            currentPage = $('#pageNumber').val() || 1;
            const pageSize = $('#pageSize').val() || 20;

            $('#imageList').html(`
            <tr>
                <td colspan="3" class="text-center spinner-container">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </td>
            </tr>
        `);

            $.get(`/api/Watermark/getWaterImages?page=${currentPage}&pageSize=${pageSize}`)
                .done(res => {
                    const tbody = $('#imageList').empty();
                    if (res.items.length === 0) {
                        tbody.append(`
                        <tr>
                            <td colspan="3" class="text-center text-muted py-4">
                                暂无图片数据
                            </td>
                        </tr>
                    `);
                        return;
                    }

                    res.items.forEach(item => {
                        tbody.append(`
                        <tr>
                            <td>${item.name}</td>
                            <td>${new Date(item.createdTime).toLocaleString()}</td>
                            <td>
                                <div class="d-flex gap-2 op-btn-group">
                                    <a href="/api/Watermark/download/${item.name}"
                                       class="btn btn-sm btn-outline-primary">下载</a>
                                    <button class="btn btn-sm btn-outline-warning"
                                            onclick="showWatermarkDialog('${item.name}')">
                                        添加水印
                                    </button>
                                </div>
                            </td>
                        </tr>
                    `);
                    });
                })
                .fail(xhr => {
                    showAlert('加载图片列表失败', 'danger');
                });
        }

        // 显示水印弹窗
        function showWatermarkDialog(fileName) {
            currentFileName = fileName;
            //$('#watermarkInput').val('asus');
            new bootstrap.Modal('#watermarkModal').show();
        }

        // 确认添加水印
        $('#confirmWatermark').click(function () {
            const text = $('#watermarkInput').val().trim();
            if (!text) {
                showAlert('水印文字不能为空', 'warning');
                return;
            }

            $.get(`/api/Watermark/EmbedWaterTxt?fileName=${encodeURIComponent(currentFileName)}&watermarkTxt=${encodeURIComponent(text)}`)
                .done(res => {
                    $('#watermarkModal').modal('hide');
                    showAlert(`水印添加成功！<br><a href="/api/Watermark/download/${currentFileName}" target="_blank">查看图片</a>`, 'success', 5000);
                    loadImages();
                })
                .fail(xhr => {
                    showAlert(`操作失败：${xhr.responseText}`, 'danger');
                });
        });

        // 水印提取功能
        function extract() {
            const file = $('#extractFile')[0].files[0];
            if (!file) return showAlert('请选择要提取水印的文件', 'warning');

            const formData = new FormData();
            formData.append('file', file);

            $.ajax({
                url: '/api/Watermark/Extract',
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                success: res => {
                    showAlert(`提取到水印：<strong>${res.result}</strong>`, 'info', 5000);
                    $('#extractFile').val('');
                },
                error: xhr => {
                    showAlert(`提取失败：${xhr.responseText}`, 'danger');
                }
            });
        }

        // 通用提示函数
        function showAlert(message, type = 'success', duration = 3000) {
            const alert = $(`
            <div class="alert alert-${type} alert-dismissible fade show">
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `);

            $('#uploadResult, #watermarkResult, #extractResult').empty().append(alert);

            if (duration > 0) {
                setTimeout(() => alert.alert('close'), duration);
            }
        }

        // 初始化加载
        $(document).ready(function () {
            loadImages();
        });
    </script>
</body>
</html>